:root {
	/* ----------首页---------- */
	--home-width: 1140px;
	--home-margin: 0 auto;
	--home-margin-xs: 0 auto;
	--home-padding: 30px 20px 30px 20px;
	--home-padding-xs: 30px 20px;
	/* ----------布局宽度---------- */
	--layout-width: 1240px;
	/* ----------布局边距---------- */
	--layout-margin: 10px auto 30px;
	--layout-margin-xs: 0px auto 30px auto;
	--layout-padding: 20px 20px;
	--layout-padding-xs: 20px 20px;
	/* ----------单块布局块---------- */
	--layout-grid-1-width: 200px;
	--layout-grid-1-width-xs: 100%;
	--layout-grid-1-margin: 0;
	--layout-grid-1-margin-xs: 0;
	--layout-grid-1-padding: 0;
	--layout-grid-1-padding-xs: 0;

	--layout-grid-2-width: calc(100% - 200px);
	--layout-grid-2-width-xs: 100%;
	--layout-grid-2-margin: 0;
	--layout-grid-2-margin-xs: 0;
	--layout-grid-2-padding: 0;
	--layout-grid-2-padding-xs: 0;
}
.layout-container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.layout-grid-1 {
	width: 100%;
}
.layout-grid-2 {
	width: 100%;
}
@media (min-width: 769px) {
	.layout-container {
		max-width: var(--layout-width);
		margin: var(--layout-margin);
		padding: var(--layout-padding);
	}
	.layout-grid-1 {
		max-width: var(--layout-grid-1-width);
		margin: var(--layout-grid-1-margin);
		padding: var(--layout-grid-1-padding);
	}
	.layout-grid-2 {
		max-width: var(--layout-grid-2-width);
		margin: var(--layout-grid-2-margin);
		padding: var(--layout-grid-2-padding);
	}
}
@media (max-width: 768px) {
	.layout-container {
		margin: var(--layout-margin-xs);
		padding: var(--layout-padding-xs);
	}
	.layout-grid-1 {
		max-width: var(--layout-grid-1-width-xs);
		margin: var(--layout-grid-1-margin-xs);
		padding: var(--layout-grid-1-padding-xs);
	}
	.layout-grid-2 {
		max-width: var(--layout-grid-2-width-xs);
		margin: var(--layout-grid-2-margin-xs);
		padding: var(--layout-grid-2-padding-xs);
	}
}
